<template>
  <div class="qrcode-link__section">

    <div class="header">
      <el-button class="primary_btn add_btn" type="text" @click.stop="AddWeblink" icon="el-icon-plus">{{$t('configLazyLoad.channel.addLink')}}</el-button>
      <div>
        <pagination
        small
        :currentPage="pagination.currentPage"
        :count="pagination.count"
        :moreFlag="pagination.moreFlag"
        @turnPage="turnPage"
        :totalPage="pagination.totalPage"/>
      </div>
    </div>

    <div class="main">

      <!-- 添加 -->
      <add-web-link-q-r-code
      v-show="isAdd"
      :accessUrl="accessUrl"
      @cancel="handleClose"
      @add-success="addSuccess"/>

      <!-- 显示添加外引链接列表 -->
      <show-out-link-info
      v-for="item in outLinkInfoList"
      :key="item._id"
      @edit-item="getOutLinkInfo"
      @delete-item="deleteItem"
      :outLinkInfo="item"
      :accessUrl="accessUrl"/>

    </div>

    <!-- 编辑 -->
    <el-dialog
      :title="$t('configLazyLoad.channel.editLink')"
      :visible.sync="dialogVisibleUpdate"
      width="60%"
      :before-close="handleClose">
      <update-web-link-q-r-code
      v-if="isEdit"
      :accessUrl="accessUrl"
      :initForm="outLinkInfo"
      @cancel="handleClose"
      @edit-success="updateItem"/>
    </el-dialog>

  </div>
</template>

<script>
  /** 这个组件就是外引链接接入性组件
   * 将所有与后端交互（dispatch）的动作都放这里
   *
   */
  import Pagination from '@/components/public-modules/card/Pagination'
  import AddWebLinkQRCode from './OutWebLinkQRCodeAdd'
  import UpdateWebLinkQRCode from './OutWebLinkQRCodeUpdate'
  import ShowOutLinkInfo from './OutWebLinkInfoShow'
  import { deepClone } from '@utils/m7Utils'
  const LIMIT = 10
  export default {
    name: 'OutWebLinkIndex',
    props: {
      accessUrl: String,
      accessId: String
    },
    watch: {
      accessId () {
        this.getOutLinkList()
      }
    },
    data () {
      return {
        outLinkInfo: {},
        outLinkInfoList: [],
        dialogVisibleUpdate: false,
        isAdd: false,
        isEdit: false,
        pagination: {
          currentPage: 1,
          count: 0,
          moreFlag: false,
          allCount: 0,
          totalPage: 0
        },
        form: {
          src: '',
          url: '',
          isQrcode: false
        }
      }
    },
    methods: {
      handleClose (val) {
        if (val === 'add') {
          this.isAdd = false
        } else {
          this.dialogVisibleUpdate = false
        }
      },

      // 查询
      getOutLinkList (pag) {
        let page = pag || 1
        let data = {
          accessId: this.accessId,
          page,
          limit: LIMIT
        }
        return this.$store.dispatch('queryLinkUrlCfg', data)
        .then(resp => {
          let r = deepClone(resp)
          console.log(resp)
          this.outLinkInfoList = [...r.list]
          this.outLinkInfoList.forEach(item => {
            if (!item.agent) {
              item.agent = ''
            }
            if (!item.toPeer) {
              item.toPeer = ''
            }
          });
          this.$set(this.pagination, 'count', r.count)
          this.$set(this.pagination, 'totalPage', Math.ceil(r.count / LIMIT))
        })
      },

      // 添加
      AddWeblink () {
        this.isAdd = true
      },
      addSuccess (outLinkInfo) {
        outLinkInfo.accessId = this.accessId
        this.$store.dispatch('addLinkUrlCfg', outLinkInfo)
        .then((resp) => {
          if (resp.success) {
            this.$message.success(this.$t('configLazyLoad.channel.addSucc'))
            delete outLinkInfo.accessId
            this.isAdd = false
            if (this.pagination.currentPage === 1) {
              this.getOutLinkList()
            } else {
              this.pagination.currentPage = 1
            }
          } else {
            this.isAdd = true
          }
        })
      },

      // 更新
      updateItem (outLinkInfo) {
        this.dialogVisibleUpdate = false
        this.$store.dispatch('updateLinkUrlCfg', outLinkInfo)
        .then((resp) => {
          if (resp.success) {
            this.$message.success(this.$t('business.updateSuccess'))
            this.getOutLinkList(this.pagination.currentPage || 1)
          }
        })
      },
      getOutLinkInfo (outLinkInfo) {
        let o = outLinkInfo || {}
        this.isEdit = true
        this.dialogVisibleUpdate = true
        this.outLinkInfo = {...o}
      },

      // 删除
      deleteItem (itemId) {
        this.$confirm(this.$t('configLazyLoad.channel.cancelTip'), this.$t('public.tip'), {
          confirmButtonText: this.$t('public.confirm'),
          cancelButtonText: this.$t('public.cancel'),
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('delLinkUrlCfg', {_id: itemId})
          .then(() => {
            this.$message.success(this.$t('sms.successDel'))
            this.getOutLinkList(this.pagination.currentPage || 1)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('config.agent.cancelDel')
          })
        })
      },

      // 翻页
      turnPage (page) {
        let pageT = page || 1
        this.getOutLinkList(pageT)
        .then(() => {
          this.$set(this.pagination, 'currentPage', pageT)
        })
      }
    },
    components: {
      AddWebLinkQRCode,
      UpdateWebLinkQRCode,
      ShowOutLinkInfo,
      Pagination
    },
    beforeMount () {
      this.getOutLinkList()
    }
  }
</script>
<style lang="stylus">
.qrcode-link__section
  a
    text-decoration underline
</style>
<style lang="stylus" scoped>
  @import "../../../../../../assets/common.styl"
  .qrcode-link__section
    background $c-back
    padding 12px
  .header
    display flex
    justify-content space-between
</style>
